﻿<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TC的</title>
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--导入jquery插件-->
    <!-- <script type="text/javascript" src="jQuery1.11.3.min.js"></script> -->
    <!--导入jqueryUI插件-->
    <script type="text/javascript" src="jquery-ui.js"></script>



    <!--自写脚本-->
    <script type="text/javascript" language="javascript">
   //在页面加载完之后加载jquery
   $().ready(function(e) {
       //拖拽复制体
       $('td[id^="draggable"]').draggable({
		   helper:"clone",
		   cursor: "move"
		 });

		//释放后
	   $('td[id^="target"]').droppable({
			drop:function(event,ui){
                console.log(event,ui)
				$(this).children().remove();
				var source = ui.draggable.clone();
				$('<img/>', {
					src: 'btn_delete.png',
					style:'display:none',
					click: function() {
					  source.remove();
					}
				}).appendTo(source);

				source.mouseenter(function () {
					$(this).find("img").show();
				});

				source.mouseleave(function () {
					$(this).find("img").hide();
				});

				$(this).append(source);

			}
		});
     });
    </script>
    <!--自写脚本-->

    <style>
        table {
            border-collapse: collapse;
        }

            table td {
                empty-cells: show;
            }

        body {
            background: #82d1ff;
        }
        /* .move222 {
            width: 170px;
            float: left;
            padding-bottom: 100px;
        } */
    </style>

</head>

<body>

    <h2 style="margin-left: 280px;">
        TC项目功能测试</h3>
        <table>
            <tr>
                <td>
                    <table border="2">
                        <tr height="40">
                            <td id="draggable1" width="70" style="height: 30px;" bgcolor="peru">PRO03</td>
                        </tr>
                        <tr height="40">
                            <td id="draggable2" width="70" style="height: 30px;" bgcolor="lightgreen">PRO04</td>
                        </tr>
                        <tr height="40">
                            <td id="draggable3" width="70" style="height: 30px;" bgcolor="salmon">PRO05</td>
                        </tr>
                        <tr height="40">
                            <td id="draggable4" width="70" style="height: 30px;" bgcolor="salmon">PRO06</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table id='dest_table' border="2">
                        <tr height="40">
                            <td width="150">22/07/25</td>
                            <td width="150">22/08/01</td>
                            <td width="150">22/08/08</td>
                            <td width="150">22/08/15</td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="target11"></td>
                            <td width="150" id="target12"></td>
                            <td width="150" id="target13"></td>
                            <td width="150" id="target14"></td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="target21" style="background-color: red;">
                                
                                <button type="button" class="btn btn-danger delower move222">PRO01</button>
                                
                            </td>
                            <td width="150" id="target21" >
                                <button type="button" class="btn btn-danger delower move222">PRO02</button>
                            </td>
                            <td width="150" id="target21"></td>
                            <td width="150" id="target21"></td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="target31"></td>
                            <td width="150" id="target31"></td>
                            <td width="150" id="target31"></td>
                            <td width="150" id="target31"></td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="target41"></td>
                            <td width="150" id="target41"></td>
                            <td width="150" id="target41"></td>
                            <td width="150" id="target41"></td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="target51"></td>
                            <td width="150" id="target51"></td>
                            <td width="150" id="target51"></td>
                            <td width="150" id="target51"></td>
                        </tr>
                        <tr height="40">
                            <td width="150" id="target61"></td>
                            <td width="150" id="target61"></td>
                            <td width="150" id="target61"></td>
                            <td width="150" id="target61"></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        
        <button type="button" class="btn btn-primary">button</button>
        <script>
            var myData = ''
            function html2json() {
                    var json = '{';
                    var otArr = [];
                    var tbl2 = $('#dest_table tr').each(function(i) {        
                        x = $(this).children();
                        var itArr = [];
                        x.each(function() {
                            itArr.push('"' + $(this).text() + '"');
                        });
                        otArr.push('"' + i + '": [' + itArr.join(',') + ']');
                    })
                    json += otArr.join(",") + '}'

                    return json;
                    };

        $('.btn-primary').click(function() {
            console.log('hello');
            myData = html2json();
            console.log(myData)
        });
        $('.delower').click(function() {
            $(this).remove();
           
        });

        $(function() {
            $( ".move222" ).sortable(      {
                connectWith: ".move222",
                });
            $( ".move222" ).disableSelection();
        });
        </script>
        

</body>
<a href="http://www.bootstrapmb.com" style="display:none">bootstrapmb</a>

